import React, { useState, useImperativeHandle, useEffect } from "react";
import { useTranslation } from "react-i18next";
import { Modal, Row, Col } from "antd";
import NoticeIcon from "../../../assets/images/dapp/tip_icon.svg";
import CheckIcon from "../../../assets/images/dapp/check.svg";
import { Checkbox } from "antd";
export const ETFModalComp = React.forwardRef(({}, ref) => {
  const { t } = useTranslation();
  const [visible, setVisible] = useState(false);

  const [locale, setLocale] = React.useState("");

  useImperativeHandle(ref, () => ({
    open: () => {
      return handleOpen();
    },
  }));
  useEffect(() => {
    if (sessionStorage.getItem("langType")) {
      setLocale(sessionStorage.getItem("langType") || "en-US"); // 设置默认语言为浏览器的语言
    } else {
      setLocale("en-US"); // 如果无法获取到浏览器语言则默认为英文
    }
    return () => {}; // 清除effects时不进行任何操作
  }, [visible]);


  const handleClose = () => {
    setVisible(false);
  };

  const handleOpen = () => {
    setVisible(true);
  };

  return (
    <Modal
      width={533}
      footer={null}
      open={visible}
      title={t("dappIndexRegulation.agreeModalTitle")}
      className="dapp-index-regulation-etf-modal"
      onCancel={() => handleClose()}
    >
      <div className="etf-modal-box">
        <div className="desc-row">{t("dappIndexRegulation.etfTitle")}</div>
        {locale === "zh-CN" ? (
          <div className="zh-box">
            <Row>
              <Col span={8}>
                <div className="item-box">
                  <img className="check-icon" src={CheckIcon}></img>
                  <div className="items-text">
                    {t("dappIndexRegulation.eftTip1")}
                  </div>
                </div>
              </Col>
              <Col span={8}>
                <div className="item-box">
                  <img className="check-icon" src={CheckIcon}></img>
                  <div className="items-text">
                    {t("dappIndexRegulation.eftTip2")}
                  </div>
                </div>
              </Col>
              <Col span={8}>
                <div className="item-box">
                  <img className="check-icon" src={CheckIcon}></img>
                  <div className="items-text">
                    {t("dappIndexRegulation.eftTip3")}
                  </div>
                </div>
              </Col>
              <Col span={8}>
                <div className="item-box">
                  <img className="check-icon" src={CheckIcon}></img>
                  <div className="items-text">
                    {t("dappIndexRegulation.eftTip4")}
                  </div>
                </div>
              </Col>
              <Col span={8}>
                <div className="item-box">
                  <img className="check-icon" src={CheckIcon}></img>
                  <div className="items-text">
                    {t("dappIndexRegulation.eftTip5")}
                  </div>
                </div>
              </Col>
              <Col span={8}>
                <div className="item-box">
                  <img className="check-icon" src={CheckIcon}></img>
                  <div className="items-text">
                    {t("dappIndexRegulation.eftTip6")}
                  </div>
                </div>
              </Col>
            </Row>
          </div>
        ) : (
          <div className="other-box">
            <div className="item-box">
              <img className="check-icon" src={CheckIcon}></img>
              <div className="items-text">
                {t("dappIndexRegulation.eftTip1")}
              </div>
            </div>
            <div className="item-box">
              <img className="check-icon" src={CheckIcon}></img>
              <div className="items-text">
                {t("dappIndexRegulation.eftTip2")}
              </div>
            </div>
            <div className="item-box">
              <img className="check-icon" src={CheckIcon}></img>
              <div className="items-text">
                {t("dappIndexRegulation.eftTip3")}
              </div>
            </div>
            <div className="item-box">
              <img className="check-icon" src={CheckIcon}></img>
              <div className="items-text">
                {t("dappIndexRegulation.eftTip4")}
              </div>
            </div>
            <div className="item-box">
              <img className="check-icon" src={CheckIcon}></img>
              <div className="items-text">
                {t("dappIndexRegulation.eftTip5")}
              </div>
            </div>
            <div className="item-box">
              <img className="check-icon" src={CheckIcon}></img>
              <div className="items-text">
                {t("dappIndexRegulation.eftTip6")}
              </div>
            </div>
          </div>
        )}

        <div className="notice-row">
          <img className="notice-icon" style={locale == 'en-US' ? {marginTop:3}:{marginTop:0}} src={NoticeIcon}></img>
          <div className="notice-text">{t("dappIndexRegulation.noticeTip")}</div>
        </div>
        <div className="footer-row">
          <div className="no-notice-box">
            <Checkbox>{t("dappIndexRegulation.noNotice")}</Checkbox>
          </div>
          <div className="action-box">
            <div className="cancel-btn"  onClick={() => setVisible(false)}>{t("dappIndexRegulation.cancel")}</div>
            <div className="confirm-btn" onClick={() => setVisible(false)}>
              {t("dappIndexRegulation.confirm")}
            </div>
          </div>
        </div>
      </div>
    </Modal>
  );
});
